Skip to content

Comments

devex: Data grid component#2561

Merged
SuaYoo merged 36 commits intomainfrom
frontend-data-grid-component
May 12, 2025
Merged

devex: Data grid component#2561
SuaYoo merged 36 commits intomainfrom
frontend-data-grid-component

Conversation

@SuaYoo
Copy link
Member

@SuaYoo SuaYoo commented Apr 23, 2025 •
edited
Loading

WIP for #2497 and #2536
Resolves #2577

Changes

  • Adds new <btrix-data-grid> component
  • Refactors <btrix-usage-history-table> to data grid
  • Refactors <btrix-syntax-input> and <btrix-link-selector-table> to be form-associated controls.

Manual testing

First, run yarn to install new dependencies.

To test the new component in Storybook:

  1. Run yarn storybook
  2. Click "Data Table"
  3. Verify that the data table supports all current table functionality, and in addition:
  • Basic keyboard navigation and refocusing
  • Usage as form control, including validation

To test the usage history table migration:

  1. Run yarn start
  2. Log in as org admin
  3. Go to "Settings" -> "Billing"
  4. Regression test usage history table

Screenshots

Page Image/video
Storybook Screenshot 2025-04-29 at 3 31 07 PM

Base automatically changed from frontend-refactor-table-padding to main April 24, 2025 02:31
@SuaYoo SuaYoo force-pushed the frontend-data-grid-component branch from 93e6f34 to e5a0a75 Compare April 24, 2025 02:32
@socket-security
Copy link

socket-security bot commented Apr 29, 2025 •
edited
Loading

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security		 Vulnerability Quality Maintenance License
Addedtabbable@​6.2.010010010079100

View full report

@SuaYoo SuaYoo mentioned this pull request Apr 22, 2025
Open
3 tasks
@SuaYoo SuaYoo requested review from emma-sg, ikreymer and tw4l April 29, 2025 22:55
@SuaYoo SuaYoo marked this pull request as ready for review April 29, 2025 22:55
emma-sg
emma-sg reviewed Apr 30, 2025
View reviewed changes
@SuaYoo SuaYoo mentioned this pull request Apr 30, 2025
Closed
@SuaYoo SuaYoo requested a review from emma-sg April 30, 2025 02:56
@SuaYoo
Copy link
Member Author

SuaYoo commented Apr 30, 2025

@emma-sg FYI added option to make number of rows being added configurable in 458b4ac

Screenshot 2025-04-30 at 10 32 54 AM

It was quick enough to add and not enabled by default, I figure we can tweak styling once we see it in a real-life use case.

emma-sg
emma-sg reviewed Apr 30, 2025
View reviewed changes
emma-sg
emma-sg reviewed Apr 30, 2025
View reviewed changes
@SuaYoo SuaYoo requested a review from emma-sg April 30, 2025 21:55
emma-sg
emma-sg approved these changes Apr 30, 2025
View reviewed changes
Copy link
Member

@emma-sg emma-sg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet! Nice work :)

@SuaYoo SuaYoo mentioned this pull request May 5, 2025
Merged
SuaYoo and others added 20 commits May 6, 2025 16:35
@SuaYoo SuaYoo force-pushed the frontend-data-grid-component branch from 12cd3f2 to a2936ed Compare May 7, 2025 02:09
@SuaYoo
Copy link
Member Author

SuaYoo commented May 7, 2025

@emma-sg Fixed sticky header not working with overflow in a2936ed. There's two options now to either sticky the header to the table or viewport. The latter disables horizontal scrolling which I believe is fine for now.

Screenshot 2025-05-07 at 9 10 27 AM

@SuaYoo
devex: Refactor syntax-input and link-selector-table into form co…
f90f25c 
…ntrols (#2588)

Refactors `<btrix-syntax-input>` and `<btrix-link-selector-table>` to be
form-associated controls.
@SuaYoo SuaYoo merged commit 594f5bc into main May 12, 2025
27 checks passed
@SuaYoo SuaYoo deleted the frontend-data-grid-component branch May 12, 2025 17:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@emma-sg emma-sg emma-sg approved these changes

@ikreymer ikreymer Awaiting requested review from ikreymer

@tw4l tw4l Awaiting requested review from tw4l

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Refactor btrix-syntax-input to use ElementInternals

2 participants

@SuaYoo @emma-sg